<template>
    <div class="box">
      <div>
        <button @click="handleClick">按钮</button>
         <h3>{{ homeData.title }}</h3>
         <h3>计数:{{ homeData.count }}</h3>
         <button @click="addCount">+1</button>
         
      </div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
</template>
<script setup>
import { reactive, onMounted, onBeforeUnmount } from "vue";
import { debounce } from "@/utils/utils.js";
import {storeToRefs} from "pinia"
// 引入store
import { useHomeStore } from "@/stores/home";
const homeStore = useHomeStore();
const { homeData } = storeToRefs(homeStore);
// 修改store中title的数据
const handleClick = () => {
  homeStore.changeTitle("修改后的标题");
};
// 修改store中count的数据
const addCount = () => {
  homeStore.addCount();
};
// 派发store中从接口获取数据的action
homeStore.fetchHomeData();











onMounted(() => {
});
</script>



<style lang="scss">
.box {
  width: 100%;
  height: 100%;
  display: flex;
  /* background-color: aqua; */
  background-image: url(../assets/img/8.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 10px;
  box-sizing: border-box;
  div {
    /* background-color: blanchedalmond; */
    border: 1px solid #000;
    flex: 1;
  }
}
</style>
